<template>
  <div class="container">
    <p class="title">该项目专长医生</p>
    <ul class="reference_project_ul">
      <li class="reference_project_li item"
          v-for="(item,index) in doctorList"
          :key="index"
          @click="toDetail(item.id)">
        <span class="reference_project">
          <img :src="'https://img.ameimeika.com/'+item.image"
               alt
               class="pro_img">
        </span>
        <br>
        <span class="logo"
              v-if="item.is_v==1">
          <img src="https://h5.ameimeika.com/mp_images/mp_2.4/yishengbiaoshi-xiao/VIP@2x.png"
               alt
               class="img">
        </span>
        <span class="reference_project_name">{{item.name}}</span>
        <br>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/"
    };
  },
  props: {
    doctorList: ""
  },
  methods: {
    toDetail (e) {
      wx.navigateTo({
        url: `/pages/package_projects/doctordetail/main?id=${e}`
      });
    }
  }
};
</script>
<style scoped lang="less">
.title {
  color: #666;
  font-size: 12px;
  background-color: #fff;
  padding-left: 15px;
}
.reference_project_ul {
  height: 115px;
  box-sizing: border-box;
  padding: 0 15px;
  clear: both;
  width: 100%;
  display: flex;
  overflow-x: auto;
  background-color: #fff;
  margin-bottom: 10px;
}
.reference_project_li {
  width: 95px;
  height: 95px;
  float: left;
  margin-top: 10px;
  margin-right: 10px;
  border: 1px solid rgba(237, 237, 237, 1);
  position: relative;
}
.reference_project {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 10px 22px 4px 22px;
}
.pro_img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.reference_project_name {
  width: 100%;
  display: inline-block;
  font-size: 14px;
  color: #333;
  text-align: center;
}
.logo {
  width: 11px;
  height: 11px;
  display: inline-block;
  z-index: 99;
  position: absolute;
  top: 48%;
  left: 62%;
  .img {
    width: 11px;
    height: 11px;
  }
}
</style>
